<template>
	<div>
		<el-form ref="form" :model="form" label-width="80px">
		<el-form-item label="标题">
		    <el-input v-model="form.title" clearable></el-input>
		</el-form-item>
		<el-form-item label="描述">
		    <el-input v-model="form.briefly" type="textarea" :rows="2"></el-input>
		</el-form-item>
		<el-form-item label="读取进度">
			<el-col :span="12">
				<el-form-item label="已读">
					<el-input-number v-model="form.percent" :min="start" :max="end" label="已读"></el-input-number>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="总页数">
					<el-input-number v-model="end" :min="0" label="总页数"></el-input-number>
				</el-form-item>
			</el-col>
		</el-form-item>
		<el-form-item label="封面">
			<div style="width:100%;">
				<ImgUpload :url="uploadUrl" @uploadSuccess="upload" :type="url" :src="form.image"></ImgUpload>
			</div>
		</el-form-item>
		<el-form-item label="状态">
			<el-radio-group v-model="form.type">
			  <el-radio-button label="2">记录</el-radio-button>
			  <el-radio-button label="1">在读</el-radio-button>
			  <el-radio-button label="0">想读</el-radio-button>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="是否显示">
			<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
		</el-form-item>
		<el-form-item class="submit-btn">
		    <el-button type="primary" @click="onSubmit">立即{{type}}</el-button>
		    <el-button @click="cancel">取消</el-button>
		</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {FormFunc} from 'common/formMixin'
	import ImgUpload from 'plugs/upload/upload'

	export default {
		mixins: [FormFunc],
		props: {
			form: {
				type: Object,
				default: () => {
					return {
						title: '',
						briefly: '',
						percent: 0,
						num: 0,
						type: '0',
						status: true,
						image: ''
					}
				}
			}
		},
		data() {
			return {
				url: 'note',
				start: 0,
				end: 0,
				uploadUrl: 'uploadImage'
			}
		},
		created() {
			this.end = this.form.num
		},
		methods: {
			upload(src) {
				this.form.image = src
			}
		},
		components: {
			ImgUpload
		},
		watch: {
			end(curVal, oldVal) {
				this.form.num = curVal
			}
		}
	}
</script>

<style lang="css" scope>
.submit-btn {
	margin: 0;
	text-align: center;
}
.CodeMirror-line {
	line-height: 20px !important;
	margin: 2px 0;
}
.ql-toolbar.ql-snow{
	line-height: normal !important;
}
.ql-editor {
	min-height: 330px;
}
.el-select {
	min-width: 180px;
}
.el-select .el-input{
	width: 100% !important;
}
</style>